<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>监狱人员后台管理系统--文件管理</title>
		<link rel="icon" href="favicon.ico" type="image/ico">
		<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
		<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
		<meta name="author" content="yinqi">
		<link href="res/css/bootstrap.min.css" rel="stylesheet">
		<link href="res/css/materialdesignicons.min.css" rel="stylesheet">
		<link href="res/css/animate.css" rel="stylesheet">
		<link href="res/css/style.min.css" rel="stylesheet">
		<link href="res/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
		<link rel="stylesheet" href="res/layui/layui/css/layui.css">
		<link rel="stylesheet" href="res/layui/layui_ext/dtree/dtree.css">
		<link rel="stylesheet" href="res/layui/layui_ext/dtree/font/dtreefont.css">
	</head>

	<body>
		<div class="container-fluid p-t-15">

			<div class="row">
				<div class="col-lg-12">

					<div class="card">
						<div class="card-header">
							<h4>文件管理</h4>
						</div>

						<div class="card-body">

							<div id="toolbar" class="toolbar-btn-action">
								<div style="margin-bottom: 15px;">
									<button id="btn_add" type="button" class="btn btn-primary" data-toggle="modal"
										data-target="#exampleModal" data-whatever="@mdo">上传文件</button>
								</div>
								<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
									aria-labelledby="exampleModalLabel">
									<div class="modal-dialog" role="document">

										<div class="modal-content">

											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal"
													aria-label="Close"><span aria-hidden="true">&times;</span></button>
											</div>

											<!-- 新增 -->
											<div class="card-body">
												<form action="" method="post" onsubmit="return false;" name="AdminForm"
													id="AdminForm">
													<input type="text" hidden="hidden" id="submitType" value="add" />
													<input type="text" id="id" name="id" hidden="hidden">
													<div class="form-group">
														<label for="path">路径</label>
														<input type="text" id="path" name="path">
													</div>
													<div class="form-group">
														<label for="file">选择文件</label>
														<input type="file" id="file" name="file">
													</div>
													<div class="form-group">
														<button class="btn btn-primary" type="submit"
															onclick="formSubmit()">确定</button>
													</div>
												</form>
											</div>

											<div class="modal-footer">
												<button type="button" class="btn btn-default"
													data-dismiss="modal">关闭</button>
											</div>

										</div>
									</div>
								</div>
							</div>
							<div id="toolbarDiv" class="table table-bordered table-hover table-striped">
								<ul id="treeFile" class="dtree" data-id="0"></ul>
							</div>
							<!-- <button id="commonTree0_btn">jiazai</button> -->

							<div style="height: 550px;overflow: auto;" id="toolbarDiv">
								<ul id="toolbarTree1" class="dtree" data-id="0"></ul>
							</div>
						</div>
					</div>
				</div>



			</div>

		</div>
		<script type="text/javascript" src="res/js/jquery.min.js"></script>
		<script type="text/javascript" src="res/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="res/js/perfect-scrollbar.min.js"></script>
		<script type="text/javascript" src="res/js/bootstrap-table/bootstrap-table.min.js"></script>
		<script type="text/javascript" src="res/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

		<!--行内编辑插件-->
		<link href="res/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
		<script type="text/javascript" src="res/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js">
		</script>
		<script type="text/javascript" src="res/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js">
		</script>
		<script type="text/javascript" src="res/layui/layui/layui.js"></script>
		<script>
		</script>
		<script type="text/javascript" src="res/js/main.min.js"></script>
		<script type="text/javascript">
			var parentId = 1;
			layui.extend({
				dtree: '{/}res/layui/layui_ext/dtree/dtree' // {/}的意思即代表采用自有路径，即不跟随 base 路径
			}).use(['dtree', 'layer', 'jquery', 'upload'], function() {
				var dtree = layui.dtree,
					layer = layui.layer,
					$ = layui.jquery;
				var upload = layui.upload;




				var DTree1 = dtree.render({
					elem: "#treeFile",
					method: "get",
					url: "/Final_ssm2/file/getList",
					toolbar: true,
					record: true,
					toolbarWay: "fixed",
					// dataFormat: "list",
					scroll: "#toolbarDiv",
					menubar: true,
					toolbarStyle: {
						title: "文件"
					},
					toolbarShow: ["add", "delete"],
					// toolbarBtn:[
					// 	[
					// 		{"label":"路径","name":"path",id:"path","type":"text"},
					// 		{"value":"上传文件","name":"file","class":"layui-btn","id":"test1","type":"button"},
					// 		// <input type="file" id="file" name="file">

					// 	]
					// ],
					toolbarExt: [{
						toolbarId: "testAdd",
						icon: "dtree-icon-roundadd",
						title: "自定义新增",
						handler: function(node, $div) {
							$('#exampleModal').modal('show');
							$('#path').val(node.recordData.href);//"/Final_ssm2" +
						}
					}, {
						toolbarId: "downLoad",
						icon: "dtree-icon-pulldown",
						title: "下载文件",
						handler: function(node, $div) {
							console.log(node);
							window.location.href = "/Final_ssm2" + node.recordData.href;//11111
						}
					}],
					toolbarFun: {
						loadToolbarBefore: function(buttons, param, $div) {
							console.log(buttons);
							console.log(param);
							console.log($div);
							if (param.leaf) { // 如果是叶子节点
								buttons.addToolbar = ""; // 取消新增功能
								// buttons.toolbarExt="";
								buttons.testAdd = "";
							} else {
								buttons.downLoad = "";
							}
							return buttons; // 将按钮对象返回
						},
						addTreeNode: function(treeNode, $div) {
							console.log(treeNode);
							$('#exampleModal').modal('show');
							// $.ajax({
							//   type: "post",
							//   data: treeNode,
							//   url: "/DTreeHelper/toolbar/insert",
							//   success: function(result){
							//     //DTree1.changeTreeNodeAdd(treeNode.nodeId); // 添加成功，返回ID
							//     //DTree1.changeTreeNodeAdd(true); // 添加成功
							//     //DTree1.changeTreeNodeAdd(result.data); // 添加成功，返回一个JSON对象
							//     //DTree1.changeTreeNodeAdd("refresh"); // 添加成功，局部刷新树
							//   },
							//   error: function(){
							//     //DTree1.changeTreeNodeAdd(false); // 添加失败
							//   }
							// });
						},
						delTreeNode: function(treeNode, $div) {
							console.log(treeNode);
							$.ajax({
								type: "get",
								data: {
									"id": treeNode.nodeId,
									"path": treeNode.recordData.href
								},
								url: "/Final_ssm2/file/delFile",
								success: function(result) {
									DTree1.changeTreeNodeDel(true); // 删除成功
								},
								error: function() {
									DTree1.changeTreeNodeDel(false); // 删除失败
								}
							});
						}
					}
					// async: false  // 只需将该参数设置为false，即可同步加载
				});
				// 点击展开时候
				$("#treeFile").on('click', '.dtreefont', function(e) {
					parentId = e.target.dataset.id;
					console.log(parentId);
				});
				// 点击节点名称获取选中节点值
				// dtree.on("node('treeFile')" ,function(obj){
				// 	layer.msg(JSON.stringify(obj.param.parentId));
				// 	parentId=obj.param.parentId;
				// });
				// 点击按钮，重新渲染，使用url渲染
				// $("#commonTree0_btn").click(function(){
				//   dtree.reload("commonTree0",{
				//     url: "test.json",
				//     method: "get", //默认为post
				//     initLevel: "1" //默认为2
				//   });
				// });

			});
			// 操作按钮
			function btnGroup() {
				let html =
					'<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
					'<a href="#!" class="btn btn-xs btn-default m-r-5 show-btn" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>' +
					'<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
				return html;
			}

			// 操作方法 - 编辑
			function editUser(id) {
				$('#id').val(id);
				$('#submitType').val('edit');
				$('#exampleModal').modal('show');
				$.ajax({
					url: '/Final_ssm2/admin/getDetail?id=' + id,
					dataType: 'json',
					type: 'get',
					success(res) {
						console.log(res);
						if (res.message === "success") {
							$('#username').val(res.data.username);
							$('#password').val(res.data.password);
						} else if ((res.message === "error")) {
							alert('查看失败！');
						} else if ((res.message === "error_permission")) {
							alert('无权限！');
						} else {
							alert('未知错误！');
						}
					},
					error() {
						alert('系统错误');
					}
				})
			}
			// 操作方法 - 删除
			function delUser(id) {
				$.ajax({
					url: '/Final_ssm2/admin/delete?id=' + id,
					dataType: 'json',
					type: 'get',
					success(res) {
						console.log(res);
						if (res.message === "success") {
							alert('删除成功！');
							$('#tb_departments').bootstrapTable('refresh');
						} else if ((res.message === "error")) {
							alert('查看失败！');
						} else if ((res.message === "error_permission")) {
							alert('无权限！');
						} else {
							alert('未知错误！');
						}
					},
					error() {
						alert('系统错误');
					}
				})
			}
			// 操作方法 - 查看
			function showUser(id) {
				$('#submitType').val('look');
				$('#exampleModal').modal('show');
				$.ajax({
					url: '/Final_ssm2/admin/getDetail?id=' + id,
					dataType: 'json',
					type: 'get',
					success(res) {
						console.log(res);
						if (res.message === "success") {} else if ((res.message === "error")) {
							alert('查看失败！');
						} else {
							alert('未知错误！');
						}
					},
					error() {
						alert('系统错误');
					}
				})
			}

			function add() {
				var formData = new FormData();
				formData.append("file", $("#file")[0].files[0]);
				formData.append("path", $('#path').val());
				$.ajax({
					url: '/Final_ssm2/file/addFile',
					dataType: 'json',
					type: 'post',
					contentType: false,
					processData: false,
					data: formData,
					success(res) {
						console.log(res);
						if (res.message === "success") {
							alert('添加成功！');
							$('#tb_departments').bootstrapTable('refresh');
						} else if ((res.message === "error")) {
							alert('查看失败！');
						} else if ((res.message === "error_permission")) {
							alert('无权限！');
						} else {
							alert('未知错误！');
						}
					},
					error() {
						alert('系统错误');
					}
				})
			}

			function formSubmit() {
				//表单类型：1、添加 2、查看 3、修改
				var submitType = $('#submitType').val();
				if (submitType === "add") {
					$('#AdminForm').bootstrapTable("removeAll");
					add();
				} else if (submitType === "edit") {
					$.ajax({
						url: '/Final_ssm2/admin/edit',
						dataType: 'json',
						type: 'post',
						data: {
							id: $('#id').val(),
							username: $('#username').val(),
							password: $('#password').val()
						},
						success(res) {
							console.log(res);
							if (res.message === "success") {
								alert('修改成功！');
								$('#tb_departments').bootstrapTable('refresh');
								$('#id').val('');
								$('#username').val('');
								$('#password').val('');
							} else if ((res.message === "error")) {
								alert('查看失败！');
							} else if ((res.message === "error_permission")) {
								alert('无权限！');
							} else {
								alert('未知错误！');
							}
						},
						error() {
							alert('系统错误');
						}
					})
				} else if (submitType === "look") {
					$('#exampleModal').modal('hide');
				}
			}

			//窗口关闭事件监听
			$("#exampleModal").on("hide.bs.modal", function() {
				console.log("------");
				$("#username").val("");
				$("#password").val("");
			});
		</script>

	</body>
</html>
